<template>
    <div>
        <a-form>
            <a-form-item label="模式">
                <a-select v-model="mod" @change="changeMod">
                    <a-select-option v-for="item in mods" :key="item">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <div class="left">
                <div v-if="this.mod == '串口服务器'">
                    <a-form-item label="IP">
                        <a-input v-model="ip"/>
                    </a-form-item>
                    <a-form-item label="端口号">
                        <a-input v-model="port"/>
                    </a-form-item>
                </div>
                <div v-if="this.mod == '本机串口'">
                    <a-form-item label="串口名">
                        <a-input v-model="serialName"/>
                    </a-form-item>
                    <a-form-item label="波特率">
                        <a-select v-model="baud" @change="changeBaud">
                            <a-select-option v-for="item in bauds" :key="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="数据位">
                        <a-select v-model="databit" @change="changeData">
                            <a-select-option v-for="item in datanum" :key="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="停止位">
                        <a-select v-model="stop"  @change="changeStop">
                            <a-select-option v-for="item in stops" :key="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="校验位">
                        <a-select v-model="check"  @change="changeCheck">
                            <a-select-option v-for="item in checks" :key="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </div>
                <div class="left">
                    <a-form-item label="Hex">
                        <a-checkbox v-model="hex"  @change="changeHex">
                        </a-checkbox>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                        <a-button @click="onSubmit()">
                            发送
                        </a-button>
                    </a-form-item>
                </div>
            </div>

        <div class="left">
            <a-form-item label="发送区">
                <a-input :rows="5" v-model="sendData" type="textarea">
                </a-input>
            </a-form-item>
            <a-form-item label="接收区">
                <a-textarea rows="15" cols="15" wrap="hard" readonly="true" v-model="textData">
                </a-textarea>
            </a-form-item>
            <a-button @click="clear">
                清空
            </a-button>
        </div>
        </a-form>
    </div>
</template>
<script>
    import {sendSerialData} from "@/services/serial";
    export default {
        data(){
            return{
                mod : "本机串口",
                ip : "",
                port : "",
                serialName: "",
                baud: "9600",
                databit: "8",
                stop: "1",
                check: "N",
                hex: false,
                sendData: "",
                bauds : ["1200","2400","4800","9600","14400","19200","38400","56000","115200"],
                datanum : ["5","6","7","8"],
                stops : ["1","1.5","2"],
                checks : ["E","O","N","M","S"],
                mods:["本机串口","串口服务器"],
                textData: "",
            }
        },
        methods:{
            changeHex(e){
                this.hex = e.target.checked
                if (e.target.checked){
                    let str = this.sendData
                    str = this.stringToHex(str)
                    this.sendData = str
                    console.log(str)
                }else{
                    let str = this.sendData
                    str = this.hexToString(str)
                    this.sendData = str
                    console.log(str)
                }

            },
            onSubmit(){
                console.log(this.$data)
                let dt = this.sendData
                let res = ""
                if (this.hex){
                    let arr = dt.split(" ")
                    for (let i=0; i<arr.length;i++){
                        let num = Math.trunc(arr[i].length / 2)
                        let m = arr[i].length % 2
                        for (let j=0; j<num;j++){
                            res += arr[i].slice(j,j+2)+ " "
                        }
                        if(m !== 0){
                            res += "0"+ arr[i][arr[i].length-1] + " "
                        }
                    }
                    console.log(res.length,res.slice(0,res.length-1))
                    this.sendData =res.slice(0,res.length-1)
                }
                let self = this
                let send = JSON.stringify(this.$data)
                sendSerialData(send).then((res=>{
                    console.log(res)
                    if (self.textData != ""){
                        self.textData += "\n"
                    }
                    self.$data.textData += res?.data?.result?.result
                }))
            },
            changeBaud(e){
                this.baud = e
            },
            changeCheck(e){
                this.check = e
            },
            changeData(e){
                this.databit = e
            },
            changeStop(e){
                this.stop = e
            },
            changeMod(e){
                this.mod = e
            },
            clear(){
                this.textData = ""
            },
            stringToHex(str){
                let val = "";
                for(let i = 0; i < str.length; i++){
                    if(val == "")
                        val = str.charCodeAt(i).toString(16);
                    else
                        val += " " + str.charCodeAt(i).toString(16);
                }
                return val;
            },
            hexToString(str){
                let val = ""
                let arr = str.split(" ")
                for(let i = 0; i < arr.length; i++){
                    val += arr[i].fromCharCode(i);
                }
                return val;
            }
        }
    }
</script>

<style lang="less" scoped>
    .left{
        width:40%;
        height:100%;
        padding:5%;
        float:left
    }
    .right{
        width:40%;
        padding:5%;
        float:right
    }
</style>